<template>
  <div>
    <a-modal :visible='showSubmit'
             title='学生信息'
             :confirm-loading='confirmLoading'
             :centered='true'
             :maskClosable='false'
             :closable='false'
             okText="确认"
             cancelText="取消"
             @ok='handleOk'
             @cancel='handleCancel'
             :width='550'>
      
      <a-form ref='elForm'
              :form='form'
              :labelAlign="'left'"
              okText='确认'
              cancel-text='取消'
              :label-col='{ span: 4 }' :wrapper-col='{ span: 15 }'>
        
        <a-form-item label='学号'>
          <a-input
            v-model='form.studentId'
            :style="{width: '120%'}"
            :disabled='true'>
          </a-input>
        </a-form-item>
        
        <a-form-item label='姓名'>
          <a-input
            v-model='form.nickName'
            placeholder='请输入学生姓名'
            :style="{width: '120%'}">
          </a-input>
        </a-form-item>
        
        <a-form-item label='分数'>
          <a-input-number
            :min='0'
            :max='100'
            :style="{width: '120%'}"
            v-model="form.score || '未提交'"
            :disabled='true'>
          </a-input-number>
        </a-form-item>
        
        <a-form-item label='班级'>
          <a-input placeholder='请输入学生班级'
                   v-model='form.clasz'
                   :style="{width: '120%'}">
          </a-input>
        </a-form-item>
        
        <a-form-item label='手机号码'>
          <a-input placeholder='请输入学生班级'
                   v-model='form.phonenumber'
                   :style="{width: '120%'}">
          </a-input>
        </a-form-item>
        
        <a-form-item label='录取状态'>
          <a-select v-model='form.enrollStatus'
                    :defaultValue='form.enrollStatus'
                    placeholder='请选择下拉选择'
                    :style="{width: '120%'}">
            
            <a-select-option
              v-for='(item, index) in statusOptions'
              :key='index'
              :value='item.value'
              :disabled='item.disabled'>{{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item label='提交时间'>
          <a-input v-model="form.updateTime  || '未提交'"
                   :style="{width: '120%'}"
                   :disabled='true'></a-input>
        </a-form-item>
        
        
        <a-form-item label='邮箱'>
          <a-input placeholder='请输入学生邮箱'
                   v-model='form.email'
                   :style="{width: '120%'}">
            <a-select
              slot='addonAfter'
              default-value='@qq.com'
              style='width: 150px'>
              <a-select-option value='@qq.com'>
                @qq.com
              </a-select-option>
              <a-select-option value='@163.com'>
                @163.com
              </a-select-option>
              <a-select-option value='@yahoo.com'>
                @yahoo.com
              </a-select-option>
              <a-select-option value='@gmail.com'>
                @gmail.com
              </a-select-option>
            </a-select>
          </a-input>
        </a-form-item>
        
        <a-form-item label='性别'>
          <a-input placeholder='请输入学生性别'
                   v-model='form.sex'
                   :style="{width: '120%'}">
          </a-input>
        </a-form-item>
      </a-form>
    
    </a-modal>
  
  </div>
</template>
<script>

import { getNewcomerByUserId } from '@/api/newcomer'

export default {
  props: {
    showSubmit: {
      type: Boolean,
      default: false
    },
    userId: {
      type: Number,
      required: false
    }
  },
  name: 'FormModelDialog',
  data() {
    return {
      showFormData: this.showFormData,
      // 确认按钮加载效果显示
      confirmLoading: false,
      statusOptions: [
        {
          'label': '待录取',
          'value': 0
        },
        {
          'label': '未录取',
          'value': 1
        },
        {
          'label': '已录取',
          'value': 2
        },
        {
          'label': '协会内成员',
          'value': 3
        }
      ],
      form: {}
    }
  },
  watch: {
    showSubmit(val, valOld) {
      this.showFormData = val
    },
    userId(val, valOld) {
      this.form.userId = val
    }
  },
  created() {
    // 根据props转递的userId查询学生信息
    // 将信息赋值给form
    getNewcomerByUserId(this.userId).then((res) => {
      this.form = res.data
    })
  },
  methods: {
    handleOk() {
      console.log(this.form)
      this.sendDialogStatus()
    },
    // 取消
    handleCancel() {
      this.sendDialogStatus()
    },
    // 给父组件发送弹出状态并重置表单内容
    sendDialogStatus() {
      this.showFormData = !this.showFormData
      this.$emit('setDialogStatus', this.showFormData)
    }
  }
}

</script>
<style>
</style>
